import { createRouter, createWebHashHistory,RouteRecordRaw } from 'vue-router'
// import type {RouteType} from 'vue-router'
// import HomeView from '../views/HomeView.vue'
import HomeView from '@/views/home/Index.vue'
import KindView from '@/views/kind/Index.vue'
import CartView from '@/views/cart/Index.vue'
import UserView from '@/views/user/Index.vue'

import Footer from '../components/Footer.vue'

// interface iItem {
//   path: string;
//   name: string;
//   component: any,
//   children?: Array<iItem>,
//   meta?: {hidden: boolean},
//   redirect?: any
// }

const routes:Array<RouteRecordRaw> = [
  {
    path: '/',
    // redirect 配置路由重定向
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'home',
    meta: {title: '首页'},
    components: {
      default: HomeView,
      footer: Footer
    }
  },{
    path: '/kind',
    name: 'kind',
    meta: {title: '分类'},
    components: {
      default: KindView,
      footer: Footer
    }
  },{
    path: '/cart',
    name: 'cart',
    meta: {title: '购物车'},
    components: {
      default: CartView,
      footer: Footer
    }
  },{
    path: '/user',
    name: 'user',
    meta: {title: '我的'},
    components: {
      // default 默认 router-view 显示的地方
      default: UserView,
      // footer 命名视图中 name 属性要对应的显示
      footer: Footer
    }
  },
  {
    path: '/login',
    name: 'login',
    meta: {
      // 配置路由的元信息
      hidden: true
    },
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import('../views/login/Index.vue')
  },
  {
    path: '/register',
    name: 'register',
    meta: {
      // 配置路由的元信息
      hidden: true
    },
    component: () => import('../views/register/Index.vue'),
    children: [
      {
        path: 'step1',
        name: 'step1',
        component: () => import('../views/register/step1.vue'),
      },
      {
        path: 'step2',
        name: 'step2',
        component: () => import('../views/register/step2.vue'),
      },
      {
        path: 'step3',
        name: 'step3',
        component: () => import('../views/register/step3.vue'),
      }
    ]
  },{
    // path: '/detail/:proid',
    path: '/detail',
    name: 'detail',
    meta: {
      // 配置路由的元信息
      hidden: true
    },
    component: () => import('../views/detail/Index.vue')
  },
  // 将匹配所有内容并将其放在 `$route.params.pathMatch` 下
  {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    beforeEnter: (to, from) => {
      // reject the navigation
      // return false

      return true
    },
    meta: {
      // 配置路由的元信息
      hidden: true
    },
    component:  () => import('../views/error/Index.vue')
  },
]

const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes
})

/*
  路由守卫：
    a. 全局守卫
      1. beforeEach：全局前置守卫，可以做路由权限（跳转之前被调用）
      2. beforeResolve：全局解析守卫，和 beforeEach 类似但是调用时机不同
      3. afterEach: 全局的后置守卫，跳转到页面路由之后调用的函数，做标题配置
    b. 独享守卫
      1. beforeEnter 路由前置独享守卫

    c. 组件内的守卫
      1. beforeRouteEnter  在渲染该组件的对应路由被验证前调用(组合式API中没有)
      2. beforeRouteUpdate  在当前路由改变，但是该组件被复用时调用
      3. beforeRouteLeave  在导航离开渲染该组件的对应路由时调用
*/

// 路由的全局前置守卫
router.beforeEach((to, from, next) => {
  /*
    from：从哪里来，上一个页面的路由信息
    to: 去哪里，即将要进入的页面，路由信息
    next: 可以用来跳转页面，也可以 放行路由(return true 相同)
  */
  // console.log(to, from);

  // 用户要是进入购物车和我的页面的时候先路由鉴权判断是否可以进入
  if(to.path == '/cart' || to.path == '/user'){
    if(localStorage.getItem('loginState') != 'true'){
      // 没有登录不给跳转
      // return false
      // 指定让你去到登录页面
      next('/login')
    }else {
      // return true
    }
  }

  // 返回 false 以取消导航
  // return true
  // 放行可以进入下一页面
  next()
})

// 全局解析
// router.beforeResolve(async to => {
  // if (to.meta.requiresCamera) {
  //   try {
  //     await askForCameraPermission()
  //   } catch (error) {
  //     if (error instanceof NotAllowedError) {
  //       // ... 处理错误，然后取消导航
  //       return false
  //     } else {
  //       // 意料之外的错误，取消导航并把错误传给全局处理器
  //       throw error
  //     }
  //   }
  // }
// })

// 路由后置守卫
// 跳转到路由之后调用该函数
router.afterEach((to, from) => {
  // 跳转到页面之后可以将标题设置为当前标题
  document.title = String(to.meta.title) || ''
})

export default router
